<template>
  <div class="condition-monitoring">
    <div class="running_state">
      <div class="title">
        <span>软件运行状态</span>
        <div class="line"></div>
      </div>
      <div class="wrapper">
        <div class="text">
          <ul>
            <li>软件版本: V4.0.0</li>
            <li>运行状态: 正常</li>
            <li>启动时间: 2023-07-21 20:55:24</li>
            <li>并行处理线程: 4</li>
            <li>数据输入方式: pcap文件</li>
            <li>数据输出方式: Pgsq</li>
          </ul>
        </div>
        <div class="cpu">
          <div id="my-cpu" key="my-cpu"></div>
          <p>cpu利用率</p>
        </div>
        <div class="memory">
          <div id="my-memory" key="my-memory"></div>
          <p>内存占用率</p>
        </div>
      </div>
    </div>

    <div class="anomaly">
      <div class="title">
        <span>软件运行状态</span>
        <div class="line"></div>
      </div>
      <div class="date">
        <p>日期<span>（当前时间近七天）</span></p>
        <el-config-provider :locale="zhCn">
          <el-date-picker
            v-model="state.data_date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-config-provider>
      </div>
      <div class="anomaly-chart">
        <div id="anomaly-chart"></div>
      </div>
      <div class="table-con">
        <el-table
          :data="state.tableData"
          height="100%">
          <el-table-column
            label="告警时间"
            align="center"
            show-overflow-tooltip
            prop="anomaly_time">
          </el-table-column>

          <el-table-column
            label="状态"
            align="center"
            show-overflow-tooltip
            prop="status">
          </el-table-column>

          <el-table-column
            label="异常警告日志"
            align="left"
            show-overflow-tooltip
            prop="anomaly_log">
          </el-table-column>
        </el-table>

        <el-config-provider :locale="zhCn">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            v-model:current-page="state.currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="state.tableData.length">
          </el-pagination>      
        </el-config-provider>
      </div>
    </div>

    <div class="log-info">
      <div class="title">
        <span>日志信息</span>
        <div class="line"></div>
      </div>
      <div class="log-info-body">
        <el-collapse v-model="state.activeNames" @change="handleChange" accordion>
          <el-collapse-item title="2023-07-12" name="1">
            <ul>
              <li>2023-07-12 22:11:26 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:15:51 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:18:11 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:19:26 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:26:56 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:42:22 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 22:59:16 上报监控状态信息成功 [监控IP：154.201.12.1]</li>
              <li>2023-07-12 23:45:16 上报监控状态信息失败 [监控IP：null]</li>
              <li>2023-07-12 23:48:16 上报监控状态信息失败 [监控IP：null]</li>
              <li>2023-07-12 23:59:16 上报监控状态信息失败 [监控IP：null]</li>
            </ul>
          </el-collapse-item>
          <el-collapse-item title="2023-07-13" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-14" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-15" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-16" name="5">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-17" name="6">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-18" name="7">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="2023-07-19" name="8">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import customPaginations from "../../../config/third-plugins/customPagination";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import * as echarts from "echarts";
interface cm {
  cpu_option:any,
  memory_option:any,
  data_date:string,
  listOption:any,
  tableData:Array<any>,
  currentPage:number,
  activeNames:string
}

const state = reactive<cm>({
  cpu_option: {},
  memory_option: {},

  data_date: '',

  listOption: {},

  tableData: [
    {
      anomaly_time: '2023-07-12 09:32',
      status: '异常',
      anomaly_log: 'IP协议解析未启动'
    },
    {
      anomaly_time: '2023-07-14 10:42',
      status: '异常',
      anomaly_log: `网络不可达，导致挂载手段PCAP文件存储磁盘失败`
    },
    {
      anomaly_time: '2023-07-16 11:52',
      status: '异常',
      anomaly_log: `网络不可达，导致挂载手段PCAP文件存储磁盘失败`
    },
    {
      anomaly_time: '2023-07-15 09:32',
      status: '异常',
      anomaly_log: 'IP协议解析未启动'
    },
    {
      anomaly_time: '2023-07-18 10:42',
      status: '异常',
      anomaly_log: `网络不可达，导致挂载手段PCAP文件存储磁盘失败`
    },
    {
      anomaly_time: '2023-07-26 13:52',
      status: '异常',
      anomaly_log: `网络不可达，导致挂载手段PCAP文件存储磁盘失败`
    },
    {
      anomaly_time: '2023-07-28 13:52',
      status: '异常',
      anomaly_log: `网络不可达，导致挂载手段PCAP文件存储磁盘失败`
    }
  ],

  currentPage: 1,

  activeNames: '1'
})

const drawCpu = () => {
  var getmax = 100
  var getvalue = 5

  state.cpu_option = {
    backgroundColor: "#FFFFFF",
    angleAxis: {
      show: false,
      max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
      type: "value",
      startAngle: 225, //极坐标初始角度
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 20, //圆环宽度
    radiusAxis: {
      show: false,
      type: "category"
    },
    //圆环位置和大小
    polar: {
      center: ["50%", "52%"],
      radius: "190%"
    },
    series: [
      {
        type: "bar",
        data: [
          {
            // 上层圆环，显示数据
            value: getvalue,
            itemStyle: {
              color: "#1598FF"
            }
          }
        ],
        barGap: "-100%", // 柱间距离,上下两层圆环重合
        coordinateSystem: "polar",
        roundCap: true, //顶端圆角
        z: 3 //圆环层级，同zindex
      },
      {
        //下层圆环，显示最大值
        type: "bar",
        data: [
          {
            value: getmax,
            itemStyle: {
              color: "#1598FF",
              opacity: 0.2,
              borderWidth: 0
            }
          }
        ],
        barGap: "-100%",
        coordinateSystem: "polar",
        roundCap: true,
        z: 1
      },
      //仪表盘
      {
        type: "gauge",
        startAngle: 225, //起始角度，同极坐标
        endAngle: -45, //终止角度，同极坐标
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: {
          // 分隔线
          shadowColor: "auto", //默认透明
          shadowBlur: 5,
          length: "50%",
          width: "2"
        },
        itemStyle: {
          color: "#1598FF",
          borderColor: "#1598FF",
          borderWidth: 6
        },
        detail: {
          formatter: function(params:any) {
            return getvalue + "%";
          },
          color: "#1598FF",
          fontSize: 30,
          fontWeight: '700',
          offsetCenter: [0, 80]
        },
        title: {
          show: false
        },
        data: [
          {
            value: getvalue
          }
        ]
      },
      {
        name: "外部刻度",
        type: "gauge",
        center: ['50%', '52%'],
        radius: "78%",
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //刻度数量
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: [[1, "rgba(0,0,0,0)"]]
          }
        }, //仪表盘轴线
        axisLabel: {
          show: false,
          color: "#4d5bd1",
          distance: 25
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: "#C7CBCF", //用颜色渐变函数不起作用
            width: 2
          },
          length: -8
        }, //刻度样式
        splitLine: {
          show: false,
          length: -20,
          lineStyle: {
            color: "#C7CBCF" //用颜色渐变函数不起作用
          }
        }, //分隔线样式
        detail: {
          show: false
        },
        pointer: {
          show: false
        }
      },
      {
        //指针外环
        type: "pie",
        // hoverAnimation: false,
        legendHoverLink: false,
        radius: ["10%", "15%"],
        z: 10,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#1598FF"
            }
          }
        ]
      },
      {
        //指针内环
        type: "pie",
        // hoverAnimation: false,
        legendHoverLink: false,
        radius: ["0%", "10%"],
        z: 10,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#FFFFFF"
            }
          }
        ]
      }
    ]
  }

  const dom = document.getElementById('my-cpu')
  const mycharts = echarts.init(dom as HTMLElement)

  mycharts.clear()
  mycharts.setOption(state.cpu_option)

  window.addEventListener('resize', () => {
    nextTick(() => {
      const dom = document.getElementById('my-cpu')
      if (dom) {
        mycharts.resize()
      }
    })
  })
}

const drawMemory = () => {
  var getmax = 100
  var getvalue = 10
  state.memory_option = {
    backgroundColor: "#FFFFFF",
    angleAxis: {
      show: false,
      max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
      type: "value",
      startAngle: 225, //极坐标初始角度
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 20, //圆环宽度
    radiusAxis: {
      show: false,
      type: "category"
    },
    //圆环位置和大小
    polar: {
      center: ["50%", "52%"],
      radius: "190%"
    },
    series: [
      {
        type: "bar",
        data: [
          {
            // 上层圆环，显示数据
            value: getvalue,
            itemStyle: {
              color: "#1598FF"
            }
          }
        ],
        barGap: "-100%", // 柱间距离,上下两层圆环重合
        coordinateSystem: "polar",
        roundCap: true, //顶端圆角
        z: 3 //圆环层级，同zindex
      },
      {
        //下层圆环，显示最大值
        type: "bar",
        data: [
          {
            value: getmax,
            itemStyle: {
              color: "#1598FF",
              opacity: 0.2,
              borderWidth: 0
            }
          }
        ],
        barGap: "-100%",
        coordinateSystem: "polar",
        roundCap: true,
        z: 1
      },
      //仪表盘
      {
        type: "gauge",
        startAngle: 225, //起始角度，同极坐标
        endAngle: -45, //终止角度，同极坐标
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: {
          // 分隔线
          shadowColor: "auto", //默认透明
          shadowBlur: 5,
          length: "50%",
          width: "2"
        },
        itemStyle: {
          color: "#1598FF",
          borderColor: "#1598FF",
          borderWidth: 6
        },
        detail: {
          formatter: function(params:any) {
            return getvalue + "%";
          },
          color: "#1598FF",
          fontSize: 30,
          fontWeight: '700',
          offsetCenter: [0, 80]
        },
        title: {
          show: false
        },
        data: [
          {
            value: getvalue
          }
        ]
      },
      {
        name: "外部刻度",
        type: "gauge",
        center: ['50%', '52%'],
        radius: "78%",
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //刻度数量
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: [[1, "rgba(0,0,0,0)"]]
          }
        }, //仪表盘轴线
        axisLabel: {
          show: false,
          color: "#4d5bd1",
          distance: 25
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: "#C7CBCF", //用颜色渐变函数不起作用
            width: 2
          },
          length: -8
        }, //刻度样式
        splitLine: {
          show: false,
          length: -20,
          lineStyle: {
            color: "#C7CBCF" //用颜色渐变函数不起作用
          }
        }, //分隔线样式
        detail: {
          show: false
        },
        pointer: {
          show: false
        }
      },
      {
        //指针外环
        type: "pie",
        // hoverAnimation: false,
        legendHoverLink: false,
        radius: ["10%", "15%"],
        z: 10,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#1598FF"
            }
          }
        ]
      },
      {
        //指针内环
        type: "pie",
        // hoverAnimation: false,
        legendHoverLink: false,
        radius: ["0%", "10%"],
        z: 10,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "#FFFFFF"
            }
          }
        ]
      }
    ]
  }

  const dom = document.getElementById('my-memory')
  const mychart = echarts.init(dom as HTMLElement)

  mychart.clear()
  mychart.setOption(state.memory_option)

  window.addEventListener('resize', () => {
    nextTick(() => {
      const dom = document.getElementById('my-memory')
      if (dom) {
        mychart.resize()
      }
    })
  })
}

const drawList = () => {
  state.listOption = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2023-07-12 09:32:01', '2023-07-14 10:42:12', '2023-07-16 11:52:32', '2023-07-15 09:32:00', '2023-07-18 10:42:45', '2023-07-26 13:52:02', '2023-07-28 13:52:11'],
      axisLabel: {
        formatter: function (params:any) {
          const temp = params.split(' ')
          return temp[0] + '\n' + temp[1]
        },
        color: '#747474'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      },
      axisLabel: {
        color: '#747474'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '18%',
      top: '10%'
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210],
        symbol: 'none',
        lineStyle: {
          color: '#2593ff'
        }
      }
    ]
  }

  const dom = document.getElementById('anomaly-chart')
  const mychart = echarts.init(dom as HTMLElement)

  mychart.clear()
  mychart.setOption(state.listOption)

  window.addEventListener('resize', () => {
    nextTick(() => {
      const dom = document.getElementById('anomaly-chart')
      if (dom) {
        mychart.resize()
      }
    })
  })
}

const handleCurrentChange = (val:any) => {}

const handleChange = () => {}

onMounted(() => {
  drawMemory()
  drawCpu()
  drawList()
})
</script>

<style scoped lang="scss">
.condition-monitoring {
  position: relative;
  background-color: #fff;
  min-height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  .title {
    margin-bottom: 20px;
    span {
      font-size: 19px;
      color: #0960bd;
      font-weight: 500;
    }
    .line {
      border-bottom: 1px solid #c0c4cc;
      margin-top: 2px;
    }
  }

  .running_state {
    .wrapper {
      display: flex;
      justify-content: space-between;
      .cpu {
        width: 33.3%;
        height: 300px;
        padding: 0px 20px 30px 20px;
        box-sizing: border-box;
        position: relative;
        div {
          height: 100%;
        }
        p {
          position: absolute;
          bottom: 38px;
          width: 100px;
          left: 0;
          right: 0;
          margin: 0 auto;
          font-size: 18px;
          font-weight: 700;
        }
      }
      .memory {
        width: 33.3%;
        height: 300px;
        position: relative;
        padding: 0px 20px 30px 20px;
        box-sizing: border-box;
        div {
          height: 100%;
        }
        p {
          position: absolute;
          bottom: 38px;
          width: 100px;
          left: 0;
          right: 0;
          margin: 0 auto;
          font-size: 18px;
          font-weight: 700;
        }
      }
      .text {
        width: 33.3%;
        height: 300px;
        display: flex;
        justify-content: center;
        margin-top: 40px;
        li {
          margin-bottom: 10px;
        }
      }
    }
  }

  .anomaly {
    .anomaly-chart {
      height: 200px;
      div {
        height: 100%;
      }
    }
    .date {
      display: flex;
      padding: 0 16px;
      box-sizing: border-box;
      p {
        font-size: 15px;
        line-height: 32px;
        span {
          font-size: 12px;
        }
      }
    }
  }

  .table-con {
    margin-top: 15px;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 342px;
  }

  .log-info {
    position: relative;
  }

  .log-info-body {
    height: 400px;
    overflow-y: auto;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
  }

  :deep(.el-pagination) {
    align-self: end;
    margin: 20px 0 10px 0;
  }
}
</style>